import React from 'react'
import List from './List';
import PageButton from './PageButton';
const listData = [
  {
  key:"001",
  idd:"001",
  title:"111111文章文章文章文章文章文章文章文章",
  time:"20121-8-21",
  tag:" git ",
  contents:"66666666666666！"
  },
  {
    key:"002",
    idd:"002",
    title:"222222文章文章文章文章文章文章文章文章",
    time:"20121-8-21",
    tag:" git ",
    contents:"66666666666666！"
  },
  {
    key:"003",
    idd:"003",
    title:"3333333文章文章文章文章文章文章文章文章",
    time:"20121-8-21",
    tag:" git ",
    contents:"66666666666666！"
  },
  {
    key:"004",
    idd:"004",
    title:"4444444文章文章文章文章文章文章文章文章",
    time:"20121-8-21",
    tag:" git ",
    contents:"66666666666666！"
  },
  {
    key:"005",
    idd:"001",
    title:"555555文章文章文章文章文章文章文章文章",
    time:"20121-8-21",
    tag:" git ",
    contents:"66666666666666！"
  },
  {
    key:"006",
    idd:"006",
    title:"666666文章文章文章文章文章文章文章文章",
    time:"20121-8-21",
    tag:" git ",
    contents:"66666666666666！"
  },
  {
    key:"007",
    idd:"007",
    title:"7777777文章文章文章文章文章文章文章文章",
    time:"20121-8-21",
    tag:" git ",
    contents:"66666666666666！"
  },
  {
    key:"008",
    idd:"008",
    title:"888888文章文章文章文章文章文章文章文章",
    time:"20121-8-21",
    tag:" git ",
    contents:"66666666666666！"
  },
  {
    key:"009",
    idd:"009",
    title:"9999999文章文章文章文章文章文章文章文章",
    time:"20121-8-21",
    tag:" git ",
    contents:"66666666666666！"
  },
 
              
] //等等等多条数据

class ListBox extends React.Component {

  constructor(props){
      super(props);
      this.pageNext=this.pageNext.bind(this);
      this.setPage=this.setPage.bind(this);
      this.state = {
          indexList:[],//当前渲染的页面数据
          totalData:listData,
          current: 1, //当前页码
          pageSize:4, //每页显示的条数
          goValue:0,  //下一页要去的条数index
          totalPage:0,//总页数
      };

  }

  componentDidMount(){
      //设置总页数  totalData[{},{},{}]
      this.setState({
          totalPage:Math.ceil( this.state.totalData.length/this.state.pageSize),
      })
      this.pageNext(this.state.goValue)//下一页要去的条数index
      console.log(this.state.totalPage)
      console.log(this.state.indexList)
  }

  //设置内容
  setPage(num){
      this.setState({
          indexList:this.state.totalData.slice(num,num+this.state.pageSize)
          //slice截取数组两个参数包起始不包结尾 不改变原数组
      })
  }


  pageNext (num) {
      this.setPage(num)
  }



  render() {

      return (
          <div className="main">
              <div className="top_bar">
                <h1>分页功能</h1>
              </div>
              <div className="lists">
                  <ul className="index">
                      {this.state.indexList.map(function (cont) {
                          return <List {...cont} />
                      })}
                  </ul>

                  <PageButton 
                  { ...this.state } 
                  // page={this.state.current}
                  // total={this.state.totalPage}
                  pageNext={this.pageNext} 
                  />

              </div>
          </div>
      );
  }
}

export default ListBox